<!-- 临时注释掉短信中心功能 - SMS组件已被禁用 -->
<template>
  <div class="sms-container">
    <!-- 使用封装的顶部导航组件 -->
    <MainHeader />

    <!-- 主要内容区 -->
    <div class="main-container">
      <!-- 使用封装的侧边菜单组件 -->
      <SideMenu />

      <!-- 右侧内容区 -->
      <div class="content">
        <!-- 功能已禁用提示 -->
        <div class="feature-unavailable">
          <div class="unavailable-content">
            <el-icon class="unavailable-icon"><WarningFilled /></el-icon>
            <h2>功能已禁用</h2>
            <p>短信中心功能已被临时禁用，如需使用请联系管理员。</p>
            <el-button type="primary" @click="goBack">返回首页</el-button>
          </div>
        </div>
              </div>
                </div>
              </div>
</template>

<script setup>
// import { ref } from 'vue' // 临时注释掉未使用的导入
import { useRouter } from 'vue-router'
import { WarningFilled } from '@element-plus/icons-vue'
import MainHeader from '@/components/MainHeader.vue'
import SideMenu from '@/components/SideMenu.vue'
// import { t } from '@/utils/i18n' // 临时注释掉未使用的导入

const router = useRouter()

// 返回首页
const goBack = () => {
  router.push('/')
}
</script>

<style scoped>
.sms-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-unavailable {
  width: 100%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.unavailable-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.unavailable-icon {
  font-size: 64px;
  color: #E6A23C;
  margin-bottom: 20px;
}

.unavailable-content h2 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 16px;
}

.unavailable-content p {
  font-size: 16px;
  color: #606266;
  margin-bottom: 30px;
}
</style> 